<template>
    <el-main>
        <el-upload
                  class="upload-demo"
                  style="float: left;color: #fff;"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
<!--                  <el-button  type="text">稽查报告上传</el-button>-->

                </el-upload>
            <template>
              <!--dINum: "101"
id: 5
idNum: "1333213128048357397"
iid: "23"
rID: "dashdkkl139012"
status: 1-->
                <el-table
                :data="tableData"
                style="width: 100%"
                @expand-change="onexpansion">
                  <el-table-column
                    label="展开详情" type="expand">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.carRecord" v-loading="!scope.row.carRecord">
                          <el-table-column prop="aEnd" label="结束时间"></el-table-column>
                          <el-table-column prop="aProof" label="收费证据"></el-table-column>
<!--                          <el-table-column prop="aProvience" label="收费省份"></el-table-column>-->
                          <el-table-column prop="aStart" label="起始时间"></el-table-column>
                          <el-table-column prop="amount" label="收费金额"></el-table-column>
                          <el-table-column prop="cId" label="收费车牌号"></el-table-column>
                          <el-table-column prop="dpNum" label="车辆行驶证"></el-table-column>
                          <el-table-column prop="pEnd" label="收费终点"></el-table-column>
                          <el-table-column prop="pStart" label="收费起点"></el-table-column>
                          <el-table-column prop="rID" label="记录id"></el-table-column>
<!--                          <el-table-column prop="reason" label="申诉原因"></el-table-column>-->
                          <el-table-column prop="status" label="申诉状态"></el-table-column>
                          <el-table-column prop="aEnd" label="结束时间"></el-table-column>
                        </el-table>
                      <div>
                        <p>申诉理由：</p>
                        <span>{{scope.row.reason}}</span>
                      </div>

<!--                      <p>{{scope.row.carRecord.aEnd}}</p>
                      <p>{{scope.row.carRecord.aProof}}</p>
                      <p>{{scope.row.carRecord.aProvience}}</p>
                      <p>{{scope.row.carRecord.aStart}}</p>
                      <p>{{scope.row.carRecord.amount}}</p>
                      <p>{{scope.row.carRecord.cId}}</p>
                      <p>{{scope.row.carRecord.dpNum}}</p>
                      <p>{{scope.row.carRecord.pEnd}}</p>
                      <p>{{scope.row.carRecord.pStart}}</p>
                      <p>{{scope.row.carRecord.rID}}</p>
                      <p>{{scope.row.carRecord.reason}}</p>
                      <p>{{scope.row.carRecord.status}}</p>-->
                    </template>
                  </el-table-column>
                <el-table-column
                    prop="id"
                    label="申诉id">
                </el-table-column>
                <el-table-column
                    prop="oId"
                    label="车主id">
                </el-table-column>
                <el-table-column
                    prop="rID"
                    label="行车记录id">
                </el-table-column>
                <el-table-column
                    prop="IID"
                    label="稽查员id">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                </el-table-column>
                  <el-table-column
                    prop="status"
                    width="250px"
                    label="处理">
                    <template slot-scope="scope">
                      <el-button-group>
                        <el-button @click="handleOpen(scope.row)">处理申诉</el-button></el-button-group>
                    </template>
                  </el-table-column>
                </el-table>
            </template>
      <el-dialog
        title="申诉报告"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div>
          <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" v-model="report"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button @click="setS(row,1)">同意申诉</el-button>
          <el-button type="danger" @click="setS(row,2)">驳回申诉</el-button>
  </span>
      </el-dialog>
        </el-main>
</template>

<script>

    import axios from "axios";
    import cookies from 'js-cookie'

    export default {
      data () {
        return {
          tableData: [],
          dialogVisible:false,
          report:'',
          row:{},
        }
      },
      mounted() {
        this.getInfo()
      },
      methods: {
        handleOpen(row){
          this.row=row
          this.dialogVisible=true
        },
        handleClose(){
          this.report=''
          this.row={}
          this.dialogVisible=false
        },
        data() {
          return {
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
          };
        },
        /*修改status*/
        setS(row,s){
          axios.post('/inspector/appeal',{id:row.id,IID:row.IID,status:s}).then((res)=>{
            console.log(res)
            console.log(this.report)
            let mydata={
              id:row.id.toString(),
              IID:row.IID,
              cID:row.carRecord[0].cId,
              oId:row.oId,
              report:this.report
            }
            console.log(row.carRecord)
            axios.post('http://8.140.14.231:8080/chaincode/report-detail/create',mydata).then((res)=>{
              console.log(res)
              this.getInfo()
              this.handleClose()
              this.$message.success("成功审批")
            })
          })
        },
        async onexpansion(row,expandedRows){
          console.log(row)
          console.log(expandedRows)
          let r={
            rID:row.rID
          }
          console.log(r)
          axios.post('/car-record/get',r).then((res)=>{
            console.log(res)
            row.carRecord=res.data.data
          })
        },
        async getInfo(){
          axios.post('/owner-inspector-apeal/get',{IID:cookies.get("id"),status:3}).then((res)=>{
            console.log(res)
            this.tableData=res.data.data
            for(let j = 0; j < this.tableData.length; j++) {
              axios.post('/car-record/get',{rID:this.tableData[j].rID}).then((res)=>{
                console.log(res)
                this.tableData[j].carRecord=res.data.data
              })

            }
/*            this.tableData.forEach(function () {

            })*/
          })
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          //return this.$confirm(`确定移除 ${ file.name }？`);
          return this.$confirm(`关闭提示？`);
        },
 }
  }

</script>
